<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email - Setup Complete</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="icon" href="Icon.png" type="image/png">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            padding: 20px;
            max-width: 600px;
            width: 100%;
        }
        .success-card {
            background-color: #ffffff;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .success-icon {
            width: 80px;
            height: 80px;
            background-color: #4CAF50;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        .success-icon span {
            color: white;
            font-size: 40px;
        }
        h1 {
            color: #2c3e50;
            margin: 20px 0;
            font-size: 28px;
        }
        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 16px;
        }
        .device-info {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            text-align: left;
        }
        .device-info h3 {
            color: #2c3e50;
            margin: 0 0 15px 0;
            font-size: 18px;
        }
        .device-info p {
            margin: 8px 0;
            color: #495057;
            font-size: 14px;
        }
        .next-steps {
            text-align: left;
            margin-top: 30px;
        }
        .next-steps h3 {
            color: #2196F3;
            margin-bottom: 15px;
            font-size: 18px;
        }
        .next-steps ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .next-steps li {
            margin: 12px 0;
            padding-left: 28px;
            position: relative;
            color: #333;
        }
        .next-steps li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #4CAF50;
            font-weight: bold;
        }
        .redirect-notice {
            margin-top: 30px;
            padding: 15px;
            background-color: #e3f2fd;
            border-radius: 8px;
            color: #1976d2;
        }
        .countdown {
            font-weight: bold;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="success-card">
            <div class="success-icon">
                <span>✓</span>
            </div>
            <h1>Successfully Connected!</h1>
            <p class="subtitle">Your Omi device is now linked with Email</p>

            <div class="next-steps">
                <h3>What's Next?</h3>
                <ul>
                    <li>Return to your Omi device app</li>
                    <li>Your email integration is ready to use</li>
                    <li>Try saying "Hey Gmail, send an email"</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        // Get URL parameters and user information
        const urlParams = new URLSearchParams(window.location.search);
        const omiuid = urlParams.get('omi_uid');
        const token = urlParams.get('token');
        const email = urlParams.get('email');
        const name = urlParams.get('name');
        
        // Update device information
        window.onload = function() {
            const deviceId = document.getElementById('device-id');
            const userEmail = document.getElementById('user-email');

            if (omiuid) {
                deviceId.textContent = `Device ID: ${omiuid}`;
            }
            if (email) {
                userEmail.textContent = `Email: ${email}`;
            }

            // Start countdown and redirect
            let countdown = 5;
            const countdownElement = document.getElementById('countdown');
            const countdownInterval = setInterval(() => {
                countdown--;
                countdownElement.textContent = countdown;
                
                if (countdown <= 0) {
                    clearInterval(countdownInterval);
                    // Redirect to Omi app using deep link
                    window.location.href = `omi://email-setup-complete?token=${encodeURIComponent(token)}&email=${encodeURIComponent(email)}`;
                }
            }, 1000);

            // Fallback for mobile browsers that might not support deep linking
            setTimeout(() => {
                // If we're still here after 5.5 seconds, deep link might have failed
                if (document.hasFocus()) {
                    const userAgent = navigator.userAgent.toLowerCase();
                    if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
                        // iOS App Store link
                        window.location.href = 'https://apps.apple.com/app/omi-app';
                    } else if (userAgent.includes('android')) {
                        // Google Play Store link
                        window.location.href = 'https://play.google.com/store/apps/details?id=com.omi.app';
                    }
                }
            }, 5500);
        };
    </script>
</body>
</html> 